<template>
  <view class="data-con">
    <view class="data-head">
      <!-- 区域选择器 -->
      <Selectcon :hasbgimg="true" :hasitembg="true" :optionlist="addresslist" @choose="choosevalue"></Selectcon>
      <view class="option-con">
        <Timerpicker :typevalue="'year'" :list="yearlist" @update:selected="handelYearChanged"
          v-model:selected="selectedYear"></Timerpicker>
        <Timerpicker :typevalue="'month'" :list="monthlist" @update:selected="handelMonthChanged"
          v-model:selected="selectedMonth"></Timerpicker>
        <Timerpicker :typevalue="'date'" :list="datelist" v-model:selected="selectedDay"></Timerpicker>
      </view>
    </view>
    <view class="data-list">
      <view class="data-item" v-for="(item,index) in firelist" :key="item.id">
        <view class="data-item-head">
          <view class="data-item-time">2023年11月11日 12:12:12</view>
        </view>
        <view class="data-item-main">
          <view class="data-item-address">一区</view>
          <view class="data-item-level">
            <image :src="level(item.level)" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <view class="charts">
      <view class="charts-head">
        各区域火情占比
      </view>
      <view class="charts-box">
        <qiun-data-charts 
              type="pie"
              :opts="opts"
              :chartData="chartData"
            />
      
      </view>
    </view>
  </view>
</template>

<script setup>
  import Selectcon from "../../components/Selectcon/Selectcon.vue"
  import Timerpicker from '../../components/Timepicker/Timepicker.vue'

  import {
    ref,
    onMounted,
    onUnmounted
  } from 'vue';
onMounted(() => {
    getServerData();
    initdate();
});
  function choosevalue(value) {
    console.log("传过来的值为：", value);
  }
  function level(level) {
    if(level == 1) {
      return '../../static/image/fire3.png'
    } else if(level == 2) {
      return '../../static/image/fire2.png'
    } else {
      return '../../static/image/fire1.png'
    }
  }
  // 初始化日期
  function initdate() {
    getyearlist();
    getmonthlist();
    var date = new Date();
    selectedYear.value = date.getFullYear();
    selectedMonth.value = date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + date.getMonth() + 1;
    selectedDay.value = date.getDate() ? date.getDate() : '0' + date.getDate()
    getdatelist(selectedYear.value, selectedMonth.value)
  }

  function handelYearChanged(newYear) {
    console.log("changed year");
    selectedYear.value = newYear
    getdatelist(newYear, selectedMonth.value)
  }

  function handelMonthChanged(newMonth) {
    console.log("changed month");
    selectedMonth.value = newMonth
    getdatelist(selectedYear.value, newMonth)
  }
  var addresslist = ref([{
    id: 1,
    text: '全部'
  }, {
    id: 2,
    text: '一区'
  }, {
    id: 3,
    text: '二区'
  }, {
    id: 4,
    text: '三区'
  }, {
    id: 5,
    text: '四区'
  },{
    id: 6,
    text: '五区'
  }]) 
  
  //被选择的年
  var selectedYear = ref("2023");
  // 获取年份数组
  var yearlist = ref([]);

  function getyearlist() {
    // 初始年份
    var date = new Date()
    var year = date.getFullYear()
    for (var i = 2020; i <= year; i++) {
      var obj = {
        id: i,
        text: i
      }
      yearlist.value.push(obj)
    }
  }
  //被选择的月
  var selectedMonth = ref('01');
  // 获取月份数组
  var monthlist = ref([]);

  function getmonthlist() {
    for (var i = 1; i <= 12; i++) {
      i = i < 10 ? '0' + i : i
      var obj = {
        id: i,
        text: i
      }
      monthlist.value.push(obj)
    }
  }
  //被选择的日
  var selectedDay = ref('03');
  // 获取日期数组
  var datelist = ref([]);
    function getdatelist(year, month) {
    datelist.value = []
    console.log(year, month);
    month = parseInt(month, 10);
    var date = new Date(year, month, 0);
    for (var i = 1; i <= date.getDate(); i++) {
      var obj = {
        id: i,
        text: i < 10 ? '0' + i : i
      }
      datelist.value.push(obj)
    }
  }
  
  var firelist =ref([
    {
      id:1,
      level:3
    },{
      id:2,
      level:2
    },{
      id:3,
      level:1
    }
  ]);
  
  var chartData = ref({});
  var opts =ref({
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [5,5,5,5],
          enableScroll: false,
          extra: {
            pie: {
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              borderWidth: 3,
              borderColor: "#FFFFFF"
            }
          },
          })
          function getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            series: [
              {
                data: [{"name":"一区","value":50},{"name":"二区","value":30},{"name":"三区","value":20},{"name":"四区","value":18},{"name":"五区","value":8}]
              }
            ]
          };
        chartData.value = JSON.parse(JSON.stringify(res));
      }, 500);
    }
</script>

<style scoped>
  .data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    height: 100rpx;
    border-bottom: 2rpx solid #00aaff;
  }
  .option-con {
    width: 500rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .data-list {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #fff;
  }
  .data-item {
    background-color: #fff;
    box-shadow: 0 0 5rpx #999;
    color: #00aaff;
    border-radius: 20rpx;
    padding: 20rpx;
    height: 100rpx;
    margin-bottom: 20rpx;
  }
  .data-item-address {
    font-size: 30rpx;
    font-weight: 600;
  }
  .data-item-time {
    font-size: 26rpx;
  }
  .data-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .data-item-level image {
    width: 60rpx;
    height: 60rpx;
  }
  .charts-box {
    width: 100%;
    height: 500rpx;
  }
  .charts-head {
    color: #2dafdfc2;
    font-weight: 600;
    font-size: 32rpx;
    margin-bottom: 30rpx;
    margin-left: 20rpx;
    padding-left: 20rpx;
    border-left: 10rpx solid #2dafdfc2;
  }
  .charts {
    padding-bottom: 60rpx;
  }
</style>
